<script setup>
</script>

<template>

  <div class="t-show-page-container">
    <div class="t-show-page">
      <div class="t-s-top">
        <img class="t-s-t-logo" src="@/assets/img/logo.png" alt="">
        <div class="t-s-t-bar"></div>
        <div class="t-s-t-title">
          <div class="t-s-tt1">智启知心-校园智能助教平台</div>
          <div class="t-s-tt2">因智而启，因心而懂— —打造专属你的学习旅程</div>
        </div>

      </div>
      <div class="t-s-bottom">
        <div class="t-s-b-box1">
          <div class="t-s-b-b1container">
            <div class="t-s-b-b1-title">可以问我</div>
            <div class="t-s-b-b1-content">
              <a class="t-s-b-b1-c-item">26考研院校怎么选择</a>
              <a class="t-s-b-b1-c-item">为我安排考研数学的学习计划</a>
              <a class="t-s-b-b1-c-item">python爬虫课程推荐</a>
              <a class="t-s-b-b1-c-item">英语四级考试什么时候报名</a>
              <a class="t-s-b-b1-c-item">DeepSeek如何本地部署</a>
            </div>
          </div>

        </div>

        <div class="t-s-b-box2">
          <div class="t-s-b-b1container">
            <div class="t-s-b-b1-title">效率工具</div>
            <div class="t-s-b-b1-content">
              <a class="t-s-b-b1-c-item">
                <img src="@/assets/icon/talk1.png" alt="" class="icon">
                <div>快速翻译</div>
              </a>
              <a class="t-s-b-b1-c-item">
                <img src="@/assets/icon/talk2.png" alt=""  class="icon">
                <div>快速翻译</div>
              </a>
              <a class="t-s-b-b1-c-item">
                <img src="@/assets/icon/talk3.png" alt=""  class="icon">
                <div>快速翻译</div>
              </a>
            </div>
          </div>
        </div>

        <div class="t-s-b-box3">

          <div class="t-s-b-box4">
            <div class="t-s-b-b1container">
              <div class="t-s-b-b1-title">智能体推荐</div>
              <div class="t-s-b-b1-content">
                <div class="t-s-b-b1-c-item">
                  <img src="@/assets/img/indexAgent.png" alt="" class="avatar">
                  <div class="text">SQl专家</div>
                </div>

                <a class="t-s-b-b1-c-item2">全能型数据库专家，精通Oracle、MySQL等数据库操作</a>
              </div>
            </div>
          </div>

          <div class="t-s-b-box5">
            <div class="t-s-b-b1container">
              <div class="t-s-b-b1-title">每日一句</div>
              <div class="t-s-b-b1-content">
                <a class="t-s-b-b1-c-item">人不通今古，马牛而襟裾。</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

.t-show-page-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 76%;
  .t-show-page {
    width: 1000px;
    height: 560px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 50px;
    .t-s-top {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 30px;
      .t-s-t-logo {
        width: 110px;
        height: 110px;
      }
      .t-s-t-bar {
        width: 4px;
        height: 95px;
        background-color: #333333;
        border-radius: 3px;
      }
      .t-s-t-title {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 6px;
        .t-s-tt1 {
          font-size: 30px;
          color: #333333;
        }
        .t-s-tt2 {
          font-size: 18px;
          color: #333333;
        }
      }
    }
    .t-s-bottom {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 15px;
      .t-s-b-box1 {
        width: 310px;
        height: 400px;
        border-radius: 20px;
        background: linear-gradient(270deg, rgba(198, 173, 255, 0.2) 0%, rgba(102, 170, 237, 0.2) 100%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .t-s-b-b1container {
          width: 85%;
          height: 90%;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: flex-start;
          gap: 10px;
          .t-s-b-b1-title {
            margin-left: 15px;
            font-weight: bold;
            font-size: 20px;
            color: #494949;
          }
          .t-s-b-b1-content {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: flex-start;
            width: 100%;
            height: 100%;
            border-radius: 15px;
            padding-top: 10px;
            padding-bottom: 10px;
            background: rgba(255, 255, 255, 0.5);
            .t-s-b-b1-c-item {
              font-size: 16px;
              color: #606060;
              margin-left: 15px;
            }
          }
        }
      }

      .t-s-b-box2 {
        width: 260px;
        height: 400px;
        border-radius: 20px;
        background: linear-gradient(270deg, rgba(198, 173, 255, 0.2) 0%, rgba(102, 170, 237, 0.2) 100%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .t-s-b-b1container {
          width: 85%;
          height: 90%;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: flex-start;
          gap: 10px;
          .t-s-b-b1-title {
            margin-left: 15px;
            font-weight: bold;
            font-size: 20px;
            color: #494949;
          }
          .t-s-b-b1-content {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: flex-start;
            gap: 10px;
            width: 100%;
            height: 100%;
            border-radius: 15px;
            padding-top: 10px;
            padding-bottom: 10px;
            .t-s-b-b1-c-item {
              width: 100%;
              height: 88px;
              border-radius: 10px;
              display: flex;
              justify-content: space-around;
              align-items: center;
              background: rgba(255, 255, 255, 0.5);
              font-size: 16px;
              color: #606060;
              .icon {
                width: 30px;
                height: 30px;
              }
            }
          }
        }
      }

      .t-s-b-box3 {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 20px;
        .t-s-b-box4 {
          width: 410px;
          height: 180px;
          border-radius: 20px;
          background: linear-gradient(270deg, rgba(198, 173, 255, 0.2) 0%, rgba(102, 170, 237, 0.2) 100%);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .t-s-b-b1container {
            width: 88%;
            height: 85%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 10px;
            .t-s-b-b1-title {
              margin-left: 15px;
              font-weight: bold;
              font-size: 20px;
              color: #494949;
            }
            .t-s-b-b1-content {
              display: flex;
              justify-content: space-around;
              align-items: center;
              width: 100%;
              height: 100%;
              border-radius: 15px;
              padding-top: 10px;
              padding-bottom: 10px;
              background: rgba(255, 255, 255, 0.5);
              color: #606060;
              .t-s-b-b1-c-item {
                margin-left: 20px;
                width: 32%;
                .avatar {
                  width: 60px;
                  height: 60px;
                  border-radius: 50%;
                  margin-bottom: 5px;
                }
                .text {
                  font-size: 16px;
                }
              }
              .t-s-b-b1-c-item2 {
                margin-right: 20px;
                width: 68%;
                line-height: 25px;
              }
            }
          }
        }
        .t-s-b-box5 {
          width: 300px;
          height: 110px;
          border-radius: 20px;
          background: linear-gradient(270deg, rgba(198, 173, 255, 0.2) 0%, rgba(102, 170, 237, 0.2) 100%);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .t-s-b-b1container {
            width: 85%;
            height: 80%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 10px;
            .t-s-b-b1-title {
              margin-left: 15px;
              font-weight: bold;
              font-size: 20px;
              color: #494949;
            }
            .t-s-b-b1-content {
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              align-items: flex-start;
              width: 100%;
              height: 100%;
              border-radius: 15px;
              padding-top: 10px;
              padding-bottom: 10px;
              background: rgba(255, 255, 255, 0.5);
              .t-s-b-b1-c-item {
                font-size: 16px;
                color: #606060;
                margin-left: 15px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
